<template>
    <div class="son">
        <h1>子组件</h1>
        <!-- 渲染页面不需要加props -->
        <p>父组件传过来的参数---{{ msg1 }}---{{ send }}----{{ attrs.num }}</p>
        <button @click="handleSend">子传父</button>

    </div>
</template>

<script lang="ts" setup>
    //defineProps 相当于vue2的props,接收父传子的参数
    // userattrs 相当于vue2的this.$attrs
    //defineEmits相当于vue2的emit
    // defineOptions里可以使用vue2语法
    // defineExpose 将子组件的变量和方法导出，父组件可以通过ref调用导出的数据和方法

    import { defineProps, useAttrs, defineEmits, ref, defineOptions, defineExpose } from 'vue';
    // 接收父子传参
    const props = defineProps({
        //接收
        msg1:{
            type: String
        },
        send:{
            type: String
        }
    })
    // 在ts中使用msg1需要通过props调用
    console.log(props.msg1);
    //注意: userAttrs和props冲突,被props接收的数据,不会再被attrs接收
    const attrs = useAttrs()
    console.log(attrs, "attrs")
    let son = ref ("考了100分")
    let son2 = ref("考了60分")


    // 子传父   自定义名字要先再defineEmits中注册一下
    let emit = defineEmits(["handleA", "handleB"])
    let handleSend = () => {
        emit("handleA", son.value)
        emit("handleB", son2.value)

    }
    // 
    let son3 = ref("三儿子买了个奔驰")
    let handleY = () =>{
        console.log("三儿子买了个老头了")
    }
    //导出
    defineExpose({
        son3,
        handleY
    })
    // 使用vue2的语法
    defineOptions({
        data(){
            return{

            }
        },
        methods:{

        }
    })
</script>

<style scoped lang="scss">
.son{
    background-color: yellow;
}
</style>